import React from 'react';
import { FaTools, FaUsers, FaRocket, FaBars } from 'react-icons/fa';
import Header from './Header';

interface TeamMemberProps {
    name: string;
    role: string;
    image: string;
}

const TeamMember: React.FC<TeamMemberProps> = ({ name, role, image }) => (
  <div className="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 flex flex-col items-center transition-all hover:shadow-xl hover:bg-opacity-20">
    <img src={image} alt={name} className="w-32 h-32 rounded-full mb-4 object-cover" />
    <h3 className="text-xl font-semibold mb-2">{name}</h3>
    <p className="text-center">{role}</p>
  </div>
);

const AboutPage = () => {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />

      <main className="container mx-auto px-4 py-12 flex-grow">
        <section className="text-center mb-16">
          <h2 className="text-5xl md:text-7xl font-bold mb-6">About Pro Tools</h2>
          <p className="text-xl md:text-2xl mb-10">Empowering creators with powerful tools</p>
        </section>

        <section className="mb-16">
          <h3 className="text-3xl font-semibold mb-6">Our Story</h3>
          <p className="text-lg mb-4">
            Pro Tools was founded in 2023 with a simple mission: to provide creators, developers, and professionals with a comprehensive suite of online tools to streamline their workflow and boost productivity.
          </p>
          <p className="text-lg mb-4">
            What started as a small project has grown into a platform used by thousands of people worldwide, offering a wide range of tools from file conversion to code formatting and image editing.
          </p>
        </section>

        <section className="mb-16">
          <h3 className="text-3xl font-semibold mb-6">Our Mission</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="flex flex-col items-center text-center">
              <FaTools className="text-5xl mb-4" />
              <h4 className="text-xl font-semibold mb-2">Simplify Workflows</h4>
              <p>We aim to simplify complex tasks with intuitive, easy-to-use tools.</p>
            </div>
            <div className="flex flex-col items-center text-center">
              <FaUsers className="text-5xl mb-4" />
              <h4 className="text-xl font-semibold mb-2">Empower Users</h4>
              <p>We strive to empower users by providing powerful tools accessible to everyone.</p>
            </div>
            <div className="flex flex-col items-center text-center">
              <FaRocket className="text-5xl mb-4" />
              <h4 className="text-xl font-semibold mb-2">Drive Innovation</h4>
              <p>We continuously innovate to meet the evolving needs of our users.</p>
            </div>
          </div>
        </section>

        <section>
          <h3 className="text-3xl font-semibold mb-6">Our Team</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <TeamMember 
              name="Jane Doe" 
              role="Founder & CEO" 
              image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" 
            />
            <TeamMember 
              name="John Smith" 
              role="CTO" 
              image="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" 
            />
            <TeamMember 
              name="Emily Brown" 
              role="Head of Design" 
              image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" 
            />
          </div>
        </section>
      </main>

      <footer className="container mx-auto px-4 py-6 text-center">
        <p>&copy; 2023 Pro Tools. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default AboutPage;
